/* 图片容器 */
.img-box {
  margin: 1rem;
  width: 25rem;
}

/* 图片自适应 */
.img-box img {
  display: block;
  width: 100%;
  height: auto;
}

/* 滤镜 */
.filter1 {
  /* 
    filter就是滤镜
    blur是虚化（模糊）
    值越大越模糊
  */
  filter: blur(5px);
}

.filter2 {
  /* 
  brightness是亮度，越大越亮
  */
  filter: brightness(0.7);
}

.filter3 {
  /* 
  opacity是不透明度,0-1
  0是全透，1是全不透
  */
  filter: opacity(0.5);
}

.filter4 {
  /* 
    invert颜色反转
  */
  filter: invert(75%);
}

.filter5 {
  /* 
    grayscale灰度
    0就没有效果，1就是全黑白
  */
  filter: grayscale(1);
}

.filter6 {
  /* 
  drop-shadow是描边的阴影（外发光）和png透明图配合很好
  参数1：x轴距离，参数2：y轴距离，参数3：z轴距离（发光）
  参数4：颜色；一般来说阴影（xy轴）和发光（z轴）不会同时设置
  */
  filter: drop-shadow(10px 10px 0rem #ff0000);
}

.clip-box {
  margin: 1rem;
  width: 15rem;
  height: 15rem;
  background-color: #ff0000;
}

/* 切片，圆 */
.clip1 {
  clip-path: circle(50%);
}

/* 多边形切片 */
.clip2 {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.clip3 {
  /* 
    polygon是多边形切片，类似于ps里面钢笔工具
    参数其实就是多边形的点，每个点是xy轴坐标两个参数构成
    多个点中间用逗号分隔
  */
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
